<template>
    <div>
        <swiper :options="swiperOption" class="1">
            <swiper-slide v-for="(item, index) in slide" :key="index" class="swiper-item">
                slide{{item}}
            </swiper-slide>
        </swiper>  
    </div>
</template>

<script>
    import 'swiper/dist/css/swiper.css'
    import {swiper, swiperSlide} from 'vue-awesome-swiper'
    export default {
        data () {
            return {
                slide: [1,2,3,4],
                swiperOption: {
                    slidesPerView: 1
                }
            }
        },
        components: {
            swiper,
            swiperSlide
        }
    }
</script>

<style scoped>
    .swiper-item {
        height: 4rem;
        text-align: center;
        border-bottom: 1px solid #e5e5e5
    }
</style>